<template>
  <ElConfigProvider :locale="zhCn">
    <div style="margin-bottom: 30px">
      <div style="margin: 15px 0" f-c-c>
        <h2>{{ info.ModName }} {{ info.ModVersions }}</h2>
      </div>

      <div f-c-c style="flex-direction: column">
        <label>Minecraft 版本 {{ info.GameVersions }}</label>
        <label>{{ info.LoaderName }} 版本 {{ info.LoaderVersion }}</label>
      </div>
    </div>
    <div f-c-c style="flex-direction: column">
      <ElCard style="width: 90%; margin-bottom: 20px">
        <template #header>
          <div f-c-c>
            <h2>配置</h2>
          </div>
        </template>
        <ElCard class="card-config" v-for="(v, index) in config" style="width: 100%">
          <div style="display: flex">
            <div f-c-c style="height: auto">
              <label style="text-wrap: nowrap; margin-right: 10px">配置组</label>
            </div>

            <div v-if="!v.ed" f-c-c style="height: auto">
              <label>{{ v.name }}</label>
            </div>

            <ElInput style="width: 100%" v-else v-model="v.name">
              <template #append>
                <ElButton :icon="Select" @click="v.ed = false" />
              </template>
            </ElInput>

            <div style="flex-grow: 1; height: 1px"></div>
            <el-button v-if="!v.ed" style="margin-left: 12px" type="primary" :icon="Edit" circle @click="v.ed = true" />
            <ElSwitch style="margin-left: 12px" v-model="v.e.allow" class="mb-2" />
            <ElPopconfirm title="确认删除?" @confirm="config = config.filter((item) => item !== v)">
              <template #reference>
                <el-button style="margin-left: 12px" type="danger" :icon="Delete" circle />
              </template>
            </ElPopconfirm>
            <el-button
              style="margin-left: 12px"
              type="success"
              :icon="FullScreen"
              circle
              @click="
                () => {
                  dialogVisible = true;
                  configtempM = v;
                }
              " />
            <el-button
              v-if="index === config.length - 1"
              style="margin-left: 12px"
              type="warning"
              :icon="Plus"
              @click="
                config.push({
                  e: {
                    allow: false,
                    allowlist: [],
                  },
                  ed: false,
                  name: '新组',
                })
              "
              circle />
          </div>
        </ElCard>
      </ElCard>
      <ElCard style="width: 90%">
        <template #header>
          <div f-c-c>
            <h2>测试是否冲突</h2>
          </div>
        </template>
        <div>
          <div f-c-c style="justify-content: center">
            <ElSelect @change="test" style="width: 45%" v-model="testE.f">
              <ElOption
                v-for="item in enchantments"
                :key="item.id"
                :label="getEnlang(item.id, item.name)"
                :value="item.nid" />
            </ElSelect>
            <div style="flex-grow: 1"></div>
            {{ iscongtu ? '不冲突' : '冲突' }}
            <div style="flex-grow: 1"></div>
            <ElSelect @change="test" style="width: 45%" v-model="testE.s">
              <ElOption
                v-for="item in enchantments"
                :key="item.id"
                :label="getEnlang(item.id, item.name)"
                :value="item.nid" />
            </ElSelect>
          </div>
        </div>
      </ElCard>
    </div>
    <ElDialog v-model="dialogVisible" :title="'修改配置组 ' + configtempM.name" align-center width="800">
      <div class="card-config" f-c-c v-for="(item, index) in configtempM.e.allowlist">
        <label style="margin-right: 20px">{{ index + 1 }}</label>
        <ElSelect v-model="configtempM.e.allowlist[index]">
          <ElOption
            v-for="item in enchantments"
            :key="item.id"
            :label="getEnlang(item.id, item.name)"
            :value="item.id" />
        </ElSelect>
        <ElButton
          style="margin-left: 10px"
          type="danger"
          @click="() => (configtempM.e.allowlist = configtempM.e.allowlist.filter((ee) => ee !== item))">
          删除
        </ElButton>
      </div>
      <ElButton type="primary" style="margin-left: 28px" @click="() => configtempM.e.allowlist.push('')">添加</ElButton>
    </ElDialog>
  </ElConfigProvider>
</template>
<script setup lang="ts">
import { ElConfigProvider, ElOption, ElSelect } from 'element-plus';
import zhCn from 'element-plus/es/locale/lang/zh-cn';
import Apis from '@/api/apis.ts';
import EnLangs from '@/resources/enLangs.json';
import { onMounted, ref, watch } from 'vue';
import type { Config, ConfigPair, EnchantmentEntity, ModInfoType } from '@/api/types.ts';
import { ElButton, ElCard, ElDialog, ElInput, ElPopconfirm, ElSwitch } from 'element-plus';
import { Delete, Edit, FullScreen, Plus, Select } from '@element-plus/icons-vue';

const getEnlang = (i: string, def: string) => {
  i = i.replace('minecraft:', 'enchantment.minecraft.');
  return Object.keys(EnLangs).includes(i) ? EnLangs[i] : def;
};
const testE = ref<{
  f: number | null;
  s: number | null;
}>({
  f: null,
  s: null,
});
const test = () => {
  if (testE.value.f != null && testE.value.s != null) {
    Apis.getTest(testE.value.f, testE.value.s).then((r) => (iscongtu.value = r.data));
  }
};
type ConfigTem = { e: ConfigPair; ed: boolean; name: string };
const info = ref<ModInfoType>({ GameVersions: '', LoaderName: '', LoaderVersion: '', ModName: '', ModVersions: '' });
const config = ref<ConfigTem[]>([]);
const dialogVisible = ref(false);
const iscongtu = ref(false);
const configtempM = ref<ConfigTem>({
  e: {
    allow: false,
    allowlist: [],
  },
  ed: false,
  name: '',
});
const enchantments = ref<{ [key: string]: EnchantmentEntity }>({});
const getdata = () => {
  Apis.getInfo().then((r) => (info.value = r.data));
  Apis.getConfig().then((r) => {
    Object.keys(r.data).forEach((a) => config.value.push({ ed: false, name: a, e: r.data[a] }));
    startw();
  });
  Apis.getEnchantments().then((r) => {
    r.data.forEach((a) => {
      enchantments.value[a.id] = a;
    });
  });
};
const startw = () => {
  watch(
    () => config.value,
    () => {
      const data: Config = {};
      config.value.forEach((a) => {
        data[a.name] = a.e;
      });
      Apis.sendConfig(data).then();
    },
    {
      deep: true,
    },
  );
};
onMounted(getdata);
</script>
<style>
* {
  margin: 0;
}

.card-config {
  margin-bottom: 10px;
}

.card-config:last-child {
  margin-bottom: 0;
}
</style>
